
/* 导航 */
.nav.slide-out-left {
    -webkit-animation: slideOutLeft 1s;
    animation: slideOutLeft 1s;
}

@-webkit-keyframes slideOutLeft {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(-150%);
      transform: translateX(-150%);
      opacity: 0;
    }
}

@keyframes slideOutLeft {
    0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(-150%);
      -ms-transform: translateX(-150%);  
      transform: translateX(-150%);
      opacity: 0;
    }
}


/* 面包屑导航 */
.breadcrumb.zoom-out {
    -webkit-animation: zoomOut 1s;
    animation: zoomOut 1s; 
}

@-webkit-keyframes zoomOut {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
    }
    100% {
      opacity: 0;
    }
}

@keyframes zoomOut {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      -ms-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
    }  
    100% {
      opacity: 0;
    }
}  



/* 按钮 */ 
.btn {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.btn:active {
    transform: scale(1.1);
    transition: 0s;
    box-shadow: 0 0 0 2px rgba(52, 139, 199, 0.6);
    opacity: 0.8;   /* 添加透明度变化 */
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }
    70% {
        transform: scale(1.2);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.btn.fade-in {
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes fadeIn {
    0% {opacity: 0;}  
    100% {opacity: 1;}
} 

.btn.rotate-in {
    -webkit-animation: rotateIn 1s;
    animation: rotateIn 1s;
}

@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes rotateIn {
    0% {
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        -ms-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        opacity: 1;
    }
}


/* 表格 */



/* Material Design 风格的表格 */
.table-md > tbody > tr {
    transition: background 0.2s ease;
}

@media (max-width: 768px) { 
    .table-md {
        overflow: scroll;
    }
}


/* 表单 */
.form-control.bounce-in {
    -webkit-animation: bounceIn 1s;
    animation: bounceIn 1s;
}  

@-webkit-keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }  
}

@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        -ms-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -ms-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
}


/* 标签 */
.label {
    transition: all 0.2s ease;   
}


/* 代码块 */ 
.code.flash {
    -webkit-animation: flash 1s;
    animation: flash 1s;  
}

@-webkit-keyframes flash {
    0%, 50%, 100% {opacity: 1;} 
    25%, 75% {opacity: 0;}
}

@keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
} 


/* 弹出框 */
.modal {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.modal.in {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0); 
}

.modal.slide-in-left {
    -webkit-animation: slideInLeft .5s;
    animation: slideInLeft .5s; 
}

@-webkit-keyframes slideInLeft {
    0% {
      -webkit-transform: translateX(-150%);
      transform: translateX(-150%);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
}

@keyframes slideInLeft {
    0% {
      -webkit-transform: translateX(-150%);
      -ms-transform: translateX(-150%);
      transform: translateX(-150%);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
}

/* 选项卡 */
.nav-tabs > li > a {
    -webkit-transition: border-color ease-in-out .15s, color ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, color ease-in-out .15s;
    transition: border-color ease-in-out .15s, color ease-in-out .15s;
}

.nav-tabs > li.zoom-in > a { 
    -webkit-animation: zoomIn .5s;
    animation: zoomIn .5s;
}

@-webkit-keyframes zoomIn {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
    }
    50% {
      opacity: 1;
    }
}

@keyframes zoomIn {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      -ms-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3);
    }
    50% {
      opacity: 1;
    }
}


/* 分页 */
.pagination > li > a,
.pagination > li > span {
   -webkit-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out; 
}


/* 轮播图 */
.carousel .carousel-inner {
    -webkit-transition: all .6s ease-in-out; 
    -o-transition: all .6s ease-in-out; 
    transition: all .6s ease-in-out;
}


/* 缩略图 */
.thumbnail {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.thumbnail.flip-in {
    -webkit-animation: flipInX 1s;
    animation: flipInX 1s;
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }  
}


/* 下拉菜单 */ 
.dropdown-menu > li > a {
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.dropdown-menu.slide-out-right {
    -webkit-animation: slideOutRight 1s;
    animation: slideOutRight 1s; 
}

@-webkit-keyframes slideOutRight {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(150%);
      transform: translateX(150%);
      opacity: 0;
    }
}

@keyframes slideOutRight {
    0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(150%);
      -ms-transform: translateX(150%); 
      transform: translateX(150%);
      opacity: 0;
    }  
}


/* 进度条 */
.progress > .progress-bar {
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}



